<nz-breadcrumb style="margin:12px 0;">
    <nz-breadcrumb-item>系统设置</nz-breadcrumb-item>
    <nz-breadcrumb-item>班级管理</nz-breadcrumb-item>
</nz-breadcrumb>
<div style="padding:24px; background: #fff; min-height: 100%;" class="animation-right">
    <button nz-button [nzType]="'primary'" [nzShape]="'circle'" (click)="showModal()">
        <i class="anticon anticon-plus"></i>
    </button>
    <nz-select style="width: 120px; position: relative; float: right;" [(ngModel)]="selectedGrade" (ngModelChange)="getAllClasses(selectedGrade)">
        <nz-option [nzLabel]="'全部'" [nzValue]="''"></nz-option>
        <nz-option *ngFor="let grade of gradeList" [nzLabel]="grade.name" [nzValue]="grade._id">
        </nz-option>
    </nz-select>
    <nz-modal [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
        <ng-template #modalTitle>
            <i class="anticon anticon-edit"></i> {{ isViewStateUpdate ? '更新班级' : '新增班级' }}
        </ng-template>
        <ng-template #modalContent>
            <form nz-form [formGroup]="classForm" (ngSubmit)="handleOk($event, classForm.value)" [nzType]="'horizontal'">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>班级名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('name')" [nzHasFeedback]="true">
                        <nz-input formControlName="name" [nzPlaceHolder]="'班级名称'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('required')">请输入班级名称</div>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('maxlength')">班级名称不能超过10个字符</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>所属年级</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('gradeId')">
                        <nz-select formControlName="gradeId">
                            <nz-option *ngFor="let grade of gradeList" [nzLabel]="grade.name" [nzValue]="grade._id">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>关联科目</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('subjectIds')">
                        <nz-select [nzMode]="'multiple'" [nzPlaceHolder]="'请选择科目'" formControlName="subjectIds" [nzNotFoundContent]="'无法找到'" [nzShowSearch]="true">
                            <nz-option *ngFor="let subject of subjectList" [nzLabel]="subject.name" [nzValue]="subject._id">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label>学生数量</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('count')">
                        <nz-input formControlName="count" [nzPlaceHolder]="'学生数量'" [nzSize]="'large'" [nzType]="'number'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('count').dirty && getFormControl('count').hasError('required')">请输入学生数量</div>
                    </div>
                </div>
            </form>
        </ng-template>
        <ng-template #modalFooter>
            <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">返 回</button>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="handleOk($event, classForm.value)" [nzLoading]="isConfirmLoading"
                [disabled]="!classForm.valid">{{ isViewStateUpdate ? '更 新' : '提 交' }}</button>
        </ng-template>
    </nz-modal>
    <nz-table #nzTable [nzAjaxData]="classList" [nzShowSizeChanger]="true" [nzLoading]="_loading" [nzTotal]="_total" [(nzPageIndex)]="_current"
        (nzPageIndexChange)="getAllClasses(selectedGrade)" [(nzPageSize)]="_pageSize" (nzPageSizeChange)="getAllClasses(selectedGrade)" [nzShowTotal]="true">
        <thead nz-thead>
            <tr>
                <th nz-th></th>
                <th nz-th>
                    <span>班级名称</span>
                </th>
                <th nz-th>
                    <span>所属年级</span>
                </th>
                <th nz-th>
                    <span>关联科目</span>
                </th>
                <th nz-th>
                    <span>学生数量</span>
                </th>
                <th nz-th>
                    <span>创建日期</span>
                </th>
                <th nz-th>
                    <span>操作</span>
                </th>
            </tr>
        </thead>
        <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let classM of nzTable.data; let i = index;">
                <td nz-td>{{ i + 1 }}</td>
                <td nz-td>{{ classM.name }}</td>
                <td nz-td>{{ classM.gradeId.name }}</td>
                <td nz-td>{{ classM.subjectIds }}</td>
                <td nz-td>{{ classM.studentsCount }}</td>
                <td nz-td>{{ classM.createDate | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
                <td nz-td>
                    <button nz-button class="ant-btn" [nzType]="'primary'" (click)="showModal(classM._id)">
                        <i class="anticon anticon-edit"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>